<template>
  <view id="chatInterface">
    <!-- 头部 -->
    <view class="topbox">
      <view class="top-top">

      </view>
      <view class="top">
        <view class="topleft">
          <image src="../../static/resort/fanhui.png" mode="" style="width: 18rpx;height: 36rpx;"></image>
        </view>
        <view class="topcenter">
          隔壁美女小李
        </view>
        <view class="topright" @click="tochatmessage()">
          <image src="../../static/message/three_drop.png" mode="" style="width: 40rpx;height: 9rpx;"></image>
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <!-- <view style="height: 160rpx;">

    </view> -->
    <!-- 内容 -->
    <view class="content">
      <scroll-view scroll-y="true" class="svbox">
        <view style="height: 1800px;">聊天内容</view>
      </scroll-view>
      <!-- 输入框 -->
      <view class="inputbox">
        <view class="botleft">
          <image src="../../static/message/chat_voice.png" mode="" style="width: 60rpx;height: 60rpx;"></image>
        </view>
        <view class="botcenter">
          <input type="text" :adjust-position="false" @click="getheight()" style="height: 100%;">
        </view>

        <view class="botright">
          <image src="../../static/message/chat_expression.png" mode="" style="width: 68rpx;height: 68rpx;"></image>

          <image src="../../static/message/chat_add.png" mode="" style="width: 68rpx;height: 68rpx;"
            @click="show = !show">
          </image>
          <!-- 展开功能 -->
          <u-popup style="position: absolute;" :show="show" mode="bottom" :overlayOpacity="0.01"
            :closeOnClickOverlay="true" @open="open" @close="close">
            <view class="spread">
              <view class="spreaditem">
                <view class="siimg">
                  <image src="../../static/message/tupian.png" mode="" style="width: 56rpx;height: 46rpx;"></image>
                </view>
                <view class="spreadtit">
                  相册
                </view>
              </view>

              <view class="spreaditem">
                <view class="siimg">
                  <image src="../../static/message/camera.png" mode="" style="width: 56rpx;height: 46rpx;"></image>
                </view>
                <view class="spreadtit">
                  拍摄
                </view>
              </view>

              <view class="spreaditem" @click="show2 = !show2">
                <view class="siimg">
                  <image src="../../static/message/video.png" mode="" style="width: 56rpx;height: 46rpx;"></image>
                </view>
                <view class="spreadtit">
                  视频通话
                </view>
              </view>
              <!-- 视频通话 -->
              <u-popup style="position: absolute;bottom: 0;" :show="show2" mode="bottom" @open="open2" @close="close2">
                <view class="video">
                  <view class="videobox">
                    视频通话
                  </view>
                  <view class="videobox">
                    语音通话
                  </view>
                  <view class="cancel" @click="show2=false">
                    取消
                  </view>
                </view>
              </u-popup>
              <!-- 视频通话 -->

              <view class="spreaditem">
                <view class="siimg">
                  <image src="../../static/message/position.png" mode="" style="width: 56rpx;height: 46rpx;"></image>
                </view>
                <view class="spreadtit">
                  位置
                </view>
              </view>

              <view class="spreaditem">
                <view class="siimg">
                  <image src="../../static/message/file.png" mode="" style="width: 56rpx;height: 46rpx;"></image>
                </view>
                <view class="spreadtit">
                  文件
                </view>
              </view>

              <view class="spreaditem" @click="toturnmoney()">
                <view class="siimg">
                  <image src="../../static/message/zhuanzhang.png" mode="" style="width: 56rpx;height: 46rpx;"></image>
                </view>
                <view class="spreadtit">
                  转账
                </view>
              </view>

              <view class="spreaditem" @click="show3 = true">
                <view class="siimg">
                  <image src="../../static/message/order.png" mode="" style="width: 56rpx;height: 46rpx;"></image>
                </view>
                <view class="spreadtit">
                  订单
                </view>
              </view>
              <!-- 订单 -->
              <u-popup :round="15" style="position: absolute;bottom: 0;" :show="show3" mode="bottom" @open="open3"
                @close="close3">
                <view class="order">
                  <view class="order-top">
                    <view style="width: 20%;">

                    </view>
                    <view style="width: 60%;text-align: center;">
                      发送订单
                    </view>
                    <view class="orderclose" @click="show3 = false">
                      X
                    </view>
                  </view>
                  <!-- tab栏 -->
                  <view class="order-tab">
                    <view class="tab-top" v-for="(item,i) in tabList" :key="i" @click="tabShow=i">
                      <view class="tab-item">
                        <image :src="item.img" class="tab-image"></image>
                        <view class="tab-tit">{{item.tit}}</view>
                      </view>
                      <view :class="tabShow==i?'tab-line':'active-line'"></view>
                    </view>
                  </view>
                  <!-- 帮忙订单 -->
                  <view class="tab-con-help" v-show="tabShow==0">
                    <!-- 捐助 -->
                    <view class="help-item">
                      <view class="help-item-left">
                        <view class="left-photo">
                          <image src="../../static/message/user_three.png" class="user-left"></image>
                          <view class="ab-image">
                            <image src="../../static/message/sex_woman.png" mode=""></image>
                          </view>
                        </view>
                        <view class="left-tit">
                          私聊
                        </view>
                      </view>
                      <view class="help-item-right">
                        <view class="help-info">
                          <view class="info-name">
                            山村支教王老师
                          </view>
                          <view class="info-time">
                            6分钟前·2.3km
                          </view>
                        </view>
                        <view class="condition">
                          必要条件：<text>教师&nbsp;认真&nbsp;负责</text>
                        </view>
                        <view class="help-con">
                          <view class="help-con-left-tit">
                            我们这里是四川的山区，急需要更多有爱心的老师来山区支教~
                          </view>
                          <view class="help-con-left-but">
                            捐助
                          </view>
                        </view>
                        <view class="help-info-money">
                          <view class="help-info-money-left">
                            <view class="money-name">筹款：</view>
                            <view class="money-blue">￥800</view>
                            <view class="money-green">/8888</view>
                          </view>
                          <view class="help-info-money-right">
                            <view class="info-message">
                              <image src="../../static/message/order-message.png" mode=""></image>
                              <text>384</text>
                            </view>
                            <view class="info-message">
                              <image src="../../static/message/hui-zan.png" v-show="!show" @click="redShow()"></image>
                              <image src="../../static/message/red-zan.png" v-show="show" @click="redShow()"></image>
                              <text>1.4w</text>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <!-- 帮助 -->
                    <view class="help-item">
                      <view class="help-item-left">
                        <view class="left-photo">
                          <image src="../../static/message/user_three.png" class="user-left"></image>
                          <view class="ab-image">
                            <image src="../../static/message/sex_woman.png" mode=""></image>
                          </view>
                        </view>
                        <view class="left-tit">
                          私聊
                        </view>
                      </view>
                      <view class="help-item-right">
                        <view class="help-info">
                          <view class="info-name">
                            山村支教王老师
                          </view>
                          <view class="info-time">
                            6分钟前·2.3km
                          </view>
                        </view>
                        <view class="condition">
                          必要条件：<text>教师&nbsp;认真&nbsp;负责</text>
                        </view>
                        <view class="help-con">
                          <view class="help-con-left-tit">
                            我们这里是四川的山区，急需要更多有爱心的老师来山区支教~
                          </view>
                          <view class="help-con-left-but">
                            帮助
                          </view>
                        </view>
                        <view class="help-info-money">
                          <view class="help-info-money-left">
                            <view class="money-name">筹款：</view>
                            <view class="money-red">10元/辆</view>
                            <!-- <view class="money-green">/8888</view> -->
                          </view>
                          <view class="help-info-money-right">
                            <view class="info-message">
                              <image src="../../static/message/order-message.png" mode=""></image>
                              <text>384</text>
                            </view>
                            <view class="info-message">
                              <image src="../../static/message/hui-zan.png" v-show="show3" @click="redShow1()"></image>
                              <image src="../../static/message/red-zan.png" v-show="!show3" @click="redShow1()"></image>
                              <text>1.4w</text>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <!-- 捐助 -->
                    <view class="help-item" v-for="item in 4">
                      <view class="help-item-left">
                        <view class="left-photo">
                          <image src="../../static/message/user_three.png" class="user-left"></image>
                          <view class="ab-image">
                            <image src="../../static/message/sex_woman.png" mode=""></image>
                          </view>
                        </view>
                        <view class="left-tit">
                          私聊
                        </view>
                      </view>
                      <view class="help-item-right">
                        <view class="help-info">
                          <view class="info-name">
                            山村支教王老师
                          </view>
                          <view class="info-time">
                            6分钟前·2.3km
                          </view>
                        </view>
                        <view class="condition">
                          必要条件：<text>教师&nbsp;认真&nbsp;负责</text>
                        </view>
                        <view class="help-con">
                          <view class="help-con-left-tit">
                            我们这里是四川的山区，急需要更多有爱心的老师来山区支教~
                          </view>
                          <view class="help-con-left-but">
                            捐助
                          </view>
                        </view>
                        <view class="help-info-money">
                          <view class="help-info-money-left">
                            <view class="money-name">筹款：</view>
                            <view class="money-blue">￥800</view>
                            <view class="money-green">/8888</view>
                          </view>
                          <view class="help-info-money-right">
                            <view class="info-message">
                              <image src="../../static/message/order-message.png" mode=""></image>
                              <text>384</text>
                            </view>
                            <view class="info-message">
                              <image src="../../static/message/hui-zan.png" v-show="show4" @click="redShow()"></image>
                              <image src="../../static/message/red-zan.png" v-show="!show4" @click="redShow()"></image>
                              <text>1.4w</text>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 帮忙订单 -->
                  <!-- 求助订单 -->
                  <view class="tab-con-resort" v-show="tabShow==1">
                    求助订单
                  </view>
                  <!-- 求助订单 -->
                  <!-- 赚钱订单 -->
                  <view class="tab-con-money" v-show="tabShow==2">
                    <view class="all">
                      <!-- 1 -->
                      <view class="allitem">
                        <view>
                          <image src="../../static/resort/indeximg1.png" mode="" style="width: 100%;height: 310rpx;">
                          </image>
                        </view>
                        <view class="allitemtext">
                          <span>又大又新鲜的水果送啦
                            <br />
                            这里最多两行
                          </span>
                        </view>
                        <view class="allitemthreebox">
                          <view class="kmbox">
                            <image src="../../static/resort/dingwei-green.png" mode=""
                              style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                            <view class="kmboxtext">
                              0.56km
                            </view>
                          </view>
                          <view class="address">
                            武汉市·飞飞排档
                          </view>
                        </view>
                        <view class="price">
                          ￥2元/斤
                        </view>
                      </view>
                      <!-- 2 -->
                      <view class="allitem">
                        <view style="position: relative;">
                          <image src="../../static/resort/indeximg2.png" mode="" style="width: 100%;height: 310rpx;">
                          </image>
                          <image src="../../static/resort/need/stop.png"
                            style="width:48rpx;height: 48rpx;position: absolute;top: 12rpx;left: 16rpx;" mode=""
                            @click="tovideo()">
                          </image>
                        </view>
                        <view class="voicebox">
                          <view class="voicetext">
                            这个地方显示的···60''
                          </view>
                          <view>
                            <image src="../../static/resort/voice.png" mode=""
                              style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
                            </image>
                          </view>
                        </view>
                        <view class="allitemthreebox">
                          <view class="kmbox">
                            <image src="../../static/resort/dingwei-green.png" mode=""
                              style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                            <view class="kmboxtext">
                              645km
                            </view>
                          </view>
                          <view class="address">
                            郑州市·动物园
                          </view>
                        </view>
                        <view class="price">
                          ￥5000元/吨
                        </view>
                      </view>
                      <!-- 3 -->
                      <view class="allitem">
                        <view>
                          <image src="../../static/resort/indeximg3.png" mode="" style="width: 100%;height: 310rpx;">
                          </image>
                        </view>
                        <view class="voicebox2">
                          <view>
                            <image src="../../static/resort/voice.png" mode=""
                              style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
                            </image>
                          </view>
                          <view class="voicetext">
                            23''
                          </view>
                        </view>
                        <view class="allitemthreebox">
                          <view class="kmbox">
                            <image src="../../static/resort/dingwei-green.png" mode=""
                              style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                            <view class="kmboxtext">
                              1485km
                            </view>
                          </view>
                          <view class="address">
                            上海市·东方明珠
                          </view>
                        </view>
                        <view class="price">
                          ￥8000元/月
                        </view>
                      </view>
                      <!-- 4 -->
                      <view class="allitem">
                        <view>
                          <image src="../../static/resort/indeximg1.png" mode="" style="width: 100%;height: 310rpx;">
                          </image>
                        </view>
                        <view class="allitemtext">
                          <span>又大又新鲜的水果送啦
                            <br />
                            这里最多两行
                          </span>
                        </view>
                        <view class="allitemthreebox">
                          <view class="kmbox">
                            <image src="../../static/resort/dingwei-green.png" mode=""
                              style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                            <view class="kmboxtext">
                              0.56km
                            </view>
                          </view>
                          <view class="address">
                            武汉市·飞飞排档
                          </view>
                        </view>
                        <view class="price">
                          ￥2元/斤
                        </view>
                      </view>
                      <!-- 5 -->
                      <view class="allitem">
                        <view>
                          <image src="../../static/resort/indeximg3.png" mode="" style="width: 100%;height: 310rpx;">
                          </image>
                        </view>
                        <view class="voicebox2">
                          <view>
                            <image src="../../static/resort/voice.png" mode=""
                              style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
                            </image>
                          </view>
                          <view class="voicetext">
                            23''
                          </view>
                        </view>
                        <view class="allitemthreebox">
                          <view class="kmbox">
                            <image src="../../static/resort/dingwei-green.png" mode=""
                              style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                            <view class="kmboxtext">
                              1485km
                            </view>
                          </view>
                          <view class="address">
                            上海市·东方明珠
                          </view>
                        </view>
                        <view class="price">
                          ￥8000元/月
                        </view>
                      </view>
                    </view>
                  </view>
                  <!-- 赚钱订单 -->
                  <!-- tab栏 -->
                </view>
              </u-popup>
              <!-- 订单 -->
              <view class="spreaditem">

              </view>
            </view>
          </u-popup>
          <!-- 展开功能 -->
        </view>
      </view>
      <!-- 输入框 -->
    </view>
    <!-- 内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabShow: 0,
        tabList: [{
          img: '/static/message/order-help.png',
          tit: '帮忙订单'
        }, {
          img: '/static/message/order-my-help.png',
          tit: '求助订单'
        }, {
          img: '/static/message/order-money.png',
          tit: '赚钱订单'
        }],
        height: '',
        show: false,
        show2: false,
        show3: false,
        // 订单
        show4: true,
        show5: true,
        // 订单
      };
    },
    methods: {
      // 订单
      redShow() {
        this.show = !this.show
      },
      redShow1() {
        this.show1 = !this.show1
      },
      // 订单
      toturnmoney() {
        uni.navigateTo({
          url: "/pages/message/turnMoney"
        })
      },
      tochatmessage() {
        uni.navigateTo({
          url: "/pages/message/chatMessage"
        })
      },
      open() {
        // console.log('open');
      },
      close() {
        this.show = false
        // console.log('close');
      },
      open2() {
        // console.log('open');
      },
      close2() {
        this.show2 = false
        // console.log('close');
      },
      open3() {
        // console.log('open');
      },
      close3() {
        this.show3 = false
        // console.log('close');
      },
      getheight() {
        uni.onKeyboardHeightChange((obj) => {
          let _sysInfo = uni.getSystemInfoSync();
          let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
          let _diff = obj.height - _heightDiff
          let height = (_diff > 0 ? _diff : 0) + "px";
          console.log(height);
        })
      }
    }
  }
</script>

<style lang="scss">
  #chatInterface {
    width: 100vw;

    // 头部
    .topbox {
      width: 100%;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 6;

      .top-top {
        width: 100%;
        height: var(--status-bar-height);
        background-color: #FFFFFF;
      }

      .top {
        width: 100%;
        padding: 20rpx 50rpx;
        box-sizing: border-box;
        display: flex;
        background-color: #FFFFFF;

        .topleft {
          width: 10%;
          padding-top: 10rpx;
        }

        .topcenter {
          width: 80%;
          text-align: center;
          font-size: 36rpx;
          font-weight: bold;
          padding-top: 5rpx;
        }

        .topright {
          width: 10%;
        }
      }
    }

    // 头部
    // 内容
    .content {
      .svbox {
        height: 87vh;
        background-color: #F5F5F5;
      }

      // 输入框
      .inputbox {
        width: 100%;
        height: 120rpx;
        position: absolute;
        bottom: 10rpx;
        background-color: #F0F0F0;
        padding: 20rpx;
        box-sizing: border-box;
        display: flex;

        .botleft {
          padding-top: 10rpx;
          width: 10%;
        }

        .botcenter {
          width: 65%;
          background-color: white;
          border-radius: 20rpx;


        }

        .botright {
          padding-left: 20rpx;
          width: 23%;
          padding-top: 10rpx;
          display: flex;
          justify-content: space-between;
        }
      }

      // 输入框
      // 展开功能
      .spread {
        position: relative;
        width: 100vw;
        height: 670rpx;
        background-color: #e5e5e5;
        padding: 60rpx;
        flex-wrap: wrap;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;

        .spreaditem {
          width: 25%;
          text-align: center;

          .siimg {
            margin: auto;
            width: 120rpx;
            height: 120rpx;
            background-color: #FFFFFF;
            border-radius: 20rpx;
            text-align: center;
            line-height: 140rpx;
          }

          .spreadtit {
            color: #646464;
            margin-top: 36rpx;
          }
        }
      }

      // 展开功能
      // 视频通话
      .video {
        width: 100%;
        height: 320rpx;
        background-color: white;

        .videobox {
          text-align: center;
          line-height: 100rpx;
          font-size: 34rpx;
          font-weight: bold;
          width: 100%;
          height: 100rpx;
          border-bottom: #EEEEEE 2rpx solid;
        }

        .cancel {
          font-size: 34rpx;
          text-align: center;
          line-height: 100rpx;
          font-weight: bold;
        }
      }

      // 视频通话
      // 订单

      .order {
        width: 100vw;
        height: 1152rpx;

        .order-top {
          font-size: 40rpx;
          box-sizing: border-box;
          padding-top: 20rpx;
          padding-bottom: 30rpx;
          text-align: center;
          display: flex;
          justify-content: space-between;

          .orderclose {
            width: 20%;
          }
        }

        // tab栏
        .order-tab {
          width: 90vw;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;

          .tab-top {
            width: 28vw;
            margin: 20rpx 0;

            .tab-item {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-bottom: 5rpx;

              .tab-image {
                width: 36rpx;
                height: 36rpx;
                margin-right: 10rpx;
              }

              .tab-tit {
                color: #333333;
              }
            }

            .tab-line {
              width: 28vw;
              height: 4rpx;
              background-color: #FF2A31;
            }

            .active-line {
              width: 28vw;
              height: 4rpx;
              background-color: #CDCDCD;
            }
          }
        }

        // 帮忙订单
        .tab-con-help {
          width: 90vw;
          margin: 0 auto;
          padding-bottom: 20rpx;

          .help-item {
            background-color: #fff;
            border-radius: 10rpx;
            padding: 24rpx;
            box-sizing: border-box;
            display: flex;
            margin: 20rpx 0;

            .help-item-left {
              width: 15vw;

              .left-photo {
                position: relative;

                .user-left {
                  width: 92rpx;
                  height: 92rpx;
                }

                .ab-image {
                  position: absolute;
                  top: 70rpx;
                  left: -5rpx;

                  image {
                    width: 28rpx;
                    height: 28rpx;
                  }
                }
              }

              .left-tit {
                width: 92rpx;
                border: 1px solid #FF8083;
                color: #FF8083;
                border-radius: 30rpx;
                text-align: center;
              }
            }

            .help-item-right {
              width: 70vw;

              .help-info {
                display: flex;
                justify-content: space-between;

                .info-name {
                  color: #979797;
                  font-size: 26rpx;
                }

                .info-time {
                  color: #CACACA;
                  font-size: 26rpx;
                }
              }

              .condition {
                text {
                  color: #EF272E;
                }
              }

              .help-con {
                display: flex;
                justify-content: space-between;

                .help-con-left-tit {
                  width: 55vw;
                }

                .help-con-left-but {
                  width: 92rpx;
                  height: 50rpx;
                  line-height: 50rpx;
                  background-color: #EF272E;
                  color: #fff;
                  text-align: center;
                  border-radius: 10rpx;
                }
              }

              .help-info-money {
                display: flex;
                justify-content: space-between;

                .help-info-money-left {
                  display: flex;

                  .money-blue {
                    color: #0296FA;
                  }

                  .money-green {
                    color: #12C366;
                  }

                  .money-red {
                    color: #EF272E;
                  }
                }

                .help-info-money-right {
                  display: flex;
                  align-items: center;

                  .info-message {
                    image {
                      width: 24rpx;
                      height: 24rpx;
                      margin-right: 5rpx;
                      vertical-align: middle;
                    }

                    text {
                      color: #717171;
                    }
                  }

                  .info-message:first-child {
                    margin-right: 20rpx;
                  }
                }
              }
            }
          }
        }

        // 求助订单
        .tab-con-resort {
          width: 90vw;
          margin: 0 auto;
        }

        // 赚钱订单
        .tab-con-money {
          width: 90vw;
          margin: 0 auto;
          padding-top: 20rpx;

          .all {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .allitem {
              margin-bottom: 20rpx;
              width: 49%;
              padding-bottom: 20rpx;
              border-radius: 20rpx;
              background-color: white;

              .allitemtext {
                font-weight: bold;
                padding: 0 10rpx;
                box-sizing: border-box;
                font-size: 30rpx;
              }

              .voicebox {
                margin-top: 8rpx;
                margin-bottom: 10rpx;
                width: 85%;
                height: 70rpx;
                background-color: #FF6A6F;
                border-radius: 5rpx;
                margin-left: 12%;
                padding: 0 10rpx;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                color: white;
                line-height: 70rpx;

                .voicetext {
                  font-size: 26rpx;
                }
              }

              .voicebox2 {
                margin-top: 8rpx;
                margin-bottom: 10rpx;
                width: 55%;
                height: 70rpx;
                background-color: #FF6A6F;
                border-radius: 5rpx;
                margin-left: 2%;
                padding: 0 10rpx;
                box-sizing: border-box;
                display: flex;
                justify-content: left;
                color: white;
                line-height: 70rpx;

                .voicetext {
                  margin-left: 10rpx;
                  font-size: 26rpx;
                }
              }

              .allitemthreebox {

                display: flex;
                justify-content: space-between;
                padding: 10rpx 10rpx;
                box-sizing: border-box;

                .kmbox {
                  display: flex;

                  .kmboxtext {
                    padding-left: 5rpx;
                    font-size: 26rpx;
                    color: #07C160;
                  }
                }

                .address {
                  font-size: 26rpx;
                }
              }

              .price {
                font-weight: bold;
                color: #FF2A31;
                font-size: 30rpx;
              }
            }
          }
        }
      }

      // 订单
    }

    // 内容
  }
</style>